<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { TClass } from '../../../../../Types/education'

/**
 * 模块名:获取到的Excel数据预览页面
 * 代码描述:
 * 作者:mck
 * 创建时间:2025/02/14 15:34:10
 */
// 初始化

// 接收classManage.vue传入的参数
const props = defineProps<{
	excelPreviewSetting: {
		visible: boolean
		data: TClass[]
		type: string
	}
}>()

// 传递给classManage.vue
const emit = defineEmits(['update:visible', 'confirm', 'cancel'])

// 编辑行

// 删除行
const handleDelete = (index: number) => {
	previewData.value.splice(index, 1) // 删除index前的 1个元素
}

// 确认操作
const handleConfirm = () => {
	emit('confirm', previewData.value)
	emit('cancel')
}

// 保持响应式
const previewData = computed(() => {
	return props.excelPreviewSetting.data
})
</script>

<template>
	<el-dialog
		v-model="props.excelPreviewSetting.visible"
		:title="props.excelPreviewSetting.type === 'import' ? '导入数据预览' : '导出数据预览'"
		width="80%"
	>
		<el-table :data="previewData" border height="300px">
			<el-table-column type="index" label="序号" width="60" />
			<el-table-column prop="academy" label="学院" />
			<el-table-column prop="major" label="专业" />
			<el-table-column prop="grade" label="年级" />
			<el-table-column prop="classname" label="班级" />
			<el-table-column prop="counsellor" label="辅导员" />
			<el-table-column prop="phoneNumber" label="联系电话" />
			<el-table-column label="操作" width="120">
				<template #default="{ $index }">
					<el-button type="danger" link @click="handleDelete($index)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<template #footer>
			<el-button @click="emit('cancel')">取消</el-button>
			<el-button type="primary" @click="handleConfirm">
				{{ props.excelPreviewSetting.type === 'import' ? '确认导入' : '确认导出' }}
			</el-button>
		</template>
	</el-dialog>
</template>
